<template>
  <div class="home-page">
    <SwiperGroup :record="swiperList.data" />

    <NoticeList />

    <CellGroup title="卡券分类"
      v-if="!stateCardType.loading">
      <Grid :column-num="4" :border="false">
        <GridItem class="category-item"
          @click="handleCategory(category.code)"
          v-for="category in stateCardType.data"
          :key="category.id"
          :icon="category.icon || 'gift'"
          :text="category.name">
        </GridItem>
      </Grid>
    </CellGroup>
    <SkeletonCategory
      v-if="stateCardType.loading" />
    <CellGroup>
      <template #title>
        <div
          style="display: flex; justify-content: space-between">
          <span>热门回收</span>
          <span @click="handleMore">
            更多
            <Icon name="arrow" size="14 " />
          </span>
        </div>
      </template>
      <template v-if="!stateCardList.loading">
        <Grid square>
          <GridItem
            v-for="card in stateCardList.data"
            :key="card.cardProductId"
            class="van-grid-item"
            @click="handleSelect(card)">
            <template #icon>
              <Image :src="card.imageUrl || cover"
                :width="80" :height="30"
                radius="4" fit="contain" />
            </template>
            <template #text>
              <CardTitle
                :text="card.cardProductName" />
            </template>
          </GridItem>
        </Grid>
      </template>
    </CellGroup>
    <SkeletonCard v-if="stateCardList.loading" />
    <Empty description="暂无数据"
      v-if="!stateCardList.data.length" />
  </div>
</template>
<script setup lang="ts">
import {
  CellGroup,
  Empty,
  Grid, GridItem, Icon,
  Image,
} from 'vant';
import { onMounted } from 'vue';
import { useRouter } from 'vue-router';

import SkeletonCard from '@/components/SkeletonCard.vue';
import SkeletonCategory from '@/components/SkeletonCategory.vue';
import usePlatformStore from '@/stores/platform.store';

import CardTitle from '../components/CardTitle.vue';
import NoticeList from '../components/NoticeList.vue';
import SwiperGroup from '../components/SwiperGroup.vue';
import useCardList from '../hooks/useCardList';
import useCardType from '../hooks/useCardType';
import useSwiperList from '../hooks/useSwiperList';
import CardItem from '../models/CardItem';

const router = useRouter();

const {
  state: stateCardType,
  fetchData: fetchCardType,
} = useCardType();
const {
  params,
  state: stateCardList,
  fetchData: fetchCardList,
} = useCardList();
const {
  state: swiperList,
  fetchData: fetchSwiperList,
} = useSwiperList();

const platformStore = usePlatformStore();

const handleInit = async () => {
  fetchCardType();
  fetchSwiperList();

  params.value.popular = true;
  params.value.platformType = platformStore.platformCardTpye;
  await fetchCardList();
};

onMounted(async () => {
  if (platformStore.platformCardTpye) {
    await handleInit();
  } else {
    await platformStore.fetchDefaultPlatform();
    handleInit();
  }
});

const cover = 'https://media.zykq.net/product/d210cd035a4d3f8401d53fe4b6c63ae1.png';

const handleSelect = (card: CardItem) => {
  router.push({ name: 'CardSubmit', params: { id: `${card.cardProductId}` } });
};

const handleMore = () => {
  router.push({ name: 'RecoveryPage' });
};

const handleCategory = (cardType: string) => {
  router.push({ name: 'RecoveryPage', query: { category: cardType } });
};
</script>
<style lang="less" scoped>
.home-page {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.mb-10 {
  margin-bottom: 10px;
}
</style>
